<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="edit-work-dialog" v-if="visible">
                <div class="edit-work-dialog__mask"></div>
                <div class="edit-work-dialog__content">
                    <div class="edit-work-dialog__close" @click="onClose">
                        <img :src="`${_oss_}images/icon-close.svg`" />
                    </div>

                    <div class="edit-work-dialog__title">修改信息</div>

                    <div class="form">
                        <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
                            <el-form-item label="名称" prop="name">
                                <el-input type="text" v-model="form.name" />
                            </el-form-item>

                            <el-form-item label="简介">
                                <el-input type="textarea" v-model="form.introduce" :autosize="false" resize="none"
                                    :rows="3" />
                            </el-form-item>

                            <el-form-item label="封面图">
                                <el-upload class="cover-uploader" :auto-upload="false" :show-file-list="false"
                                    :on-change="onUploadChange">
                                    <img v-if="form.cover" :src="GetBlobLink(form.cover)" class="cover" />

                                    <el-icon v-else class="cover-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>

                            <template v-if="type_id == 1">
                                <el-form-item label="主办方">
                                    <el-input type="text" v-model="form.sponsor" />
                                </el-form-item>

                                <el-form-item label="展览时间">
                                    <el-date-picker v-model="form.exhibition_time" type="daterange" unlink-panels
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        :value-on-clear="null" value-format="X" />
                                </el-form-item>

                                <el-form-item label="开启投票">
                                    <el-radio-group v-model="form.is_vote">
                                        <el-radio :label="0">否</el-radio>
                                        <el-radio :label="1">是</el-radio>
                                    </el-radio-group>
                                </el-form-item>

                                <template v-if="form.is_vote == 1">
                                    <el-form-item label="投票时间" prop="vote_time">
                                        <el-date-picker v-model="form.vote_time" type="daterange" unlink-panels
                                            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                            :value-on-clear="null" value-format="X" />
                                    </el-form-item>

                                    <el-form-item label="投票类型">
                                        <el-radio-group v-model="form.vote_type">
                                            <el-radio :label="1">一次性投票</el-radio>
                                            <el-radio :label="2">每天均可投票</el-radio>
                                        </el-radio-group>
                                    </el-form-item>

                                    <el-form-item label="投票次数" prop="vote_times">
                                        <el-input type="number" v-model="form.vote_times" />
                                    </el-form-item>
                                </template>

                                <el-form-item label="开启门票">
                                    <el-radio-group v-model="form.is_admission_ticket">
                                        <el-radio :label="0">否</el-radio>
                                        <el-radio :label="1">是</el-radio>
                                    </el-radio-group>
                                </el-form-item>

                                <el-form-item prop="ticket_price" label="门票价格" v-if="form.is_admission_ticket == 1">
                                    <el-input type="number" v-model="form.ticket_price" />
                                </el-form-item>
                            </template>
                        </el-form>
                    </div>

                    <div class="footer">
                        <el-button type="primary" @click="onSubmit">修改</el-button>
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { UpdateWorksInfo } from "~/api";
import { Plus } from '@element-plus/icons-vue';

const visible = ref(false);
const type_id = ref(null);

const formRef = ref(null);

const formRules = reactive({
    name: {
        required: true,
        message: '请输入作品名称',
        trigger: 'blur'
    },
    vote_time: {
        required: true,
        message: '请输入投票次数',
        trigger: 'blur'
    },
    vote_times: {
        required: true,
        message: '请输入投票时间',
        trigger: 'blur'
    },
    ticket_price: {
        required: true,
        message: '请输入门票价格',
        trigger: 'blur'
    }
});

const form = reactive({
    id: undefined,
    name: undefined,
    introduce: undefined,
    sponsor: undefined,
    exhibition_time: null,
    is_admission_ticket: 0,
    ticket_price: undefined,
    is_vote: 0,
    vote_time: null,
    vote_type: 1,
    vote_times: 5,
    cover: undefined
});
const emit = defineEmits(["success"]);

const onClose = () => {
    visible.value = false;

}

const onUploadChange = (res) => {
    // var reader = new FileReader();

    // reader.onload = function (e) {
    //     var img = new Image();
    //     img.onload = function () {
    //         // 图片的宽度和高度
    //         console.log('Width: ', this.width);
    //         console.log('Height: ', this.height);
    //         if (this.width >= 1920 || this.height >= 1080) {
    //             form.cover = res.raw;
    //         } else {
    //             Message().warning("请上传宽度≥1920像素或者高度≥1080像素的图片");
    //         }
    //     };

    //     // 将读取到的图片数据设置为Image对象的源
    //     img.src = e.target.result;
    // };

    // // 读取上传的图片文件为DataURL
    // reader.readAsDataURL(res.raw);

    form.cover = res.raw;
}

const GetBlobLink = (file) => {
    if (typeof file === 'string') {
        return file;
    }
    const blob = new Blob([file], { type: file.type });
    return URL.createObjectURL(blob);
}

const onSubmit = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            const formData = new FormData();
            formData.append('id', form.id);
            formData.append('name', form.name);
            formData.append('introduce', form.introduce);
            formData.append('sponsor', form.sponsor);
            formData.append('exhibition_starttime', form.exhibition_time ? form.exhibition_time[0] : "");
            formData.append('exhibition_endtime', form.exhibition_time ? form.exhibition_time[1] : "");

            formData.append('is_vote', form.is_vote);
            formData.append('vote_starttime', form.vote_time ? form.vote_time[0] : "");
            formData.append('vote_endtime', form.vote_time ? form.vote_time[1] : "");
            formData.append('vote_type', form.vote_type);
            formData.append('vote_times', form.vote_times);

            formData.append('is_admission_ticket', form.is_admission_ticket);
            formData.append('ticket_price', form.ticket_price);

            if (typeof form.cover !== 'string') {
                formData.append('file', form.cover);
            }

            const res = await UpdateWorksInfo(formData);

            if (res.code == 200) {
                Message().success("修改成功");
                emit('success');
                onClose();
            } else {
                Message().error(res.msg);
            }
        }
    })
}

defineExpose({
    show(item, type) {
        form.id = item.id;
        form.name = item.name;
        form.cover = item.file;
        form.introduce = item.introduce;
        form.exhibition_time = item.exhibition_starttime && item.exhibition_endtime ? [item.exhibition_starttime, item.exhibition_endtime] : null;
        form.is_admission_ticket = +item.is_admission_ticket;
        form.ticket_price = item.ticket_price;
        form.is_vote = +item.is_vote;
        form.vote_time = item.vote_starttime && item.vote_endtime ? [item.vote_starttime, item.vote_endtime] : null;
        form.vote_type = +item.vote_type;
        form.sponsor = item.sponsor;

        visible.value = true;
        type_id.value = type;
    }
})
</script>

<style>
.cover-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.cover-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.cover-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    text-align: center;
}
</style>

<style lang="scss" scoped>
.edit-work-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border-radius: 8px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    &__title {
        font-size: 18px;
        text-align: center;
        padding: 14px 0;
    }

    .cover-uploader {
        .cover {
            width: 108px;
            height: 108px;
            display: block;
            object-fit: cover;
        }
    }

    .form {
        max-height: 80vh;
        padding: 10px 20px;
        overflow: auto;
    }

    .footer {
        display: flex;
        justify-content: center;
        padding: 10px 0;
    }

    &__close {
        position: absolute;
        top: -28px;
        right: -28px;
        width: 28px;
        height: 28px;
        cursor: pointer;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
